//各种预设样式在这里写
//调用方式 @include ($parm:value,....);例如要调用透明度 @include opacity(0.3)  解析出来的就是
//  opacity: 0.3;
//  filter:alpha(style=0,opacity=30);

//透明度
@mixin opacity($alpha:0.5){
  opacity: $alpha;
  filter:alpha(style=0,opacity=$alpha*100);
}

//渐变Gradients
//水平left->right  两色
@mixin gradient-horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
  background-image: -webkit-linear-gradient(left, $start-color $start-percent, $end-color $end-percent); // Safari 5.1-6, Chrome 10+
  background-image: -o-linear-gradient(left, $start-color $start-percent, $end-color $end-percent); // Opera 12
  background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9-
}

//垂直top->bottom  两色
@mixin gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
  background-image: -webkit-linear-gradient(top, $start-color $start-percent, $end-color $end-percent);  // Safari 5.1-6, Chrome 10+
  background-image: -o-linear-gradient(top, $start-color $start-percent, $end-color $end-percent);  // Opera 12
  background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down
}
//带角度参数  两色
@mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
  background-repeat: repeat-x;
  background-image: -webkit-linear-gradient($deg, $start-color, $end-color); // Safari 5.1-6, Chrome 10+
  background-image: -o-linear-gradient($deg, $start-color, $end-color); // Opera 12
  background-image: linear-gradient($deg, $start-color, $end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
}
//水平三色
@mixin gradient-horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
  background-image: -webkit-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
  background-image: -o-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
  background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
  background-repeat: no-repeat;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down, gets no color-stop at all for proper fallback
}
//垂直三色
@mixin gradient-vertical-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
  background-image: -webkit-linear-gradient($start-color, $mid-color $color-stop, $end-color);
  background-image: -o-linear-gradient($start-color, $mid-color $color-stop, $end-color);
  background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
  background-repeat: no-repeat;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
}
//圆形扩散
@mixin gradient-radial($inner-color: #555, $outer-color: #333) {
  background-image: -webkit-radial-gradient(circle, $inner-color, $outer-color);
  background-image: radial-gradient(circle, $inner-color, $outer-color);
  background-repeat: no-repeat;
}

@mixin gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg) {
  background-image: -webkit-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
  background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
}
//阴影boxshadow//X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜 阴影透明度;
@mixin box-shadow($x:1px,$y:1px,$r:1px,$w:1px,$c:$shadow-color,$alpha:0.3,$inset:0){
    @if($inset==0){
      box-shadow: $x $y $r $w rgba($c,$alpha);
    }@else{
      box-shadow: $x $y $r $w rgba($c,$alpha) inset;
   }

}
//超出文本使用...替代
@mixin text-overflow{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

//公用渐变 参数 渐变部分  渐变时间  渐变曲线
@mixin  transition($part:all,$time:0.2s,$style:linear){
  -webkit-transition: $part $time $style;
  -moz-transition: $part $time $style ;
  -ms-transition: $part $time $style ;
  -o-transition: $part $time $style ;
  transition: $part $time  $style ;
}
//滚动条样式美化
@mixin  beautifyScrollbar($color:nth($main-color,1)){
  &::-webkit-scrollbar
  {
    width: 6px;
    background-color: transparent;
  }
  /*定义滑块 内阴影+圆角*/
  &::-webkit-scrollbar-thumb
  {
    border-radius: 3px;
    background-color: $color;
  }
  /*滑块效果*/
  &::-webkit-scrollbar-thumb:hover
  {
    border-radius: 3px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.4);
  }
}
//背景图片平铺 覆盖  $src地址  $size:百分比,cover,contain等  $position位置 left:right:bottom:top
@mixin bgimgCover($src:"",$size:cover,$position:left){
  background-image: url("#{$src}");
  background-size: $size;
  background-repeat: no-repeat;
  background-position: $position;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='#{$src}',sizingMethod='scale');
  -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='#{$src}',sizingMethod='scale');
}










